<template>
  <div id="mobileHomeBanner">
    <van-swipe touchable :autoplay="interval" ref="vswipe">
      <van-swipe-item
        class="carouselImagesItem"
        v-for="item in carouselImages"
        :key="item.id"
      >
        <img v-lazy="show_url + item.img" @click="gotoBanner(item)" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "MobileHomeBanner",
  props: ["show_url", "carouselImages", "interval"],
  methods: {
    gotoBanner(item) {
      this.$emit("gotoBanner", item);
    },
  },
};
</script>

<style lang="less" scoped>
#mobileHomeBanner {
  height: 100%;
  width: 100%;
  // width: 700px;
  height: 390px;
  // box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;

  .carouselImagesItem {
    height: 100%;
    width: 100%;
    border-radius: 12px;

    img {
      // width: 700px;
      width: 100%;
      height: 390px;
      // height: 100%;
      border-radius: 12px;
    }
  }

  /deep/.van-swipe__indicator {
    width: 30px;
    height: 6px;
    background: #ffffff;
    border-radius: 2px;
    margin: 0;
  }
}
</style>
